<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>09_Vue实例_生命周期</title>
</head>
<body>
<!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()// 初始化显示之后立即调用（1次）
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器
-->

<div id="test">
  <button @click="destroyVue">destory vue</button>
  <p v-if="isShow">尚硅谷IT教育</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#test',
    data: {
      isShow: true
    },

    mounted () {// 初始化显示之后立即调用（1次）
      // 执行异步任务
      // 箭头函数 匿名函数没有自己的对象，需要引用外部的this对象
      this.intervalId = setInterval(() => {
        console.log('-----')
        this.isShow = !this.isShow
      }, 1000)
    },

    beforeDestroy() {// 死亡之前调用，调用一次
      console.log('beforeDestroy()')
      // 执行收尾的工作，清除定时器
      clearInterval(this.intervalId)
    },

    methods: {
      destroyVue () {
        this.$destroy()// 销毁vm对象
      }
    }
  })


</script>
</body>
</html>